<template>
  <div class="columnTable">
    <div class="header">
      <slot name="title">
        <h3 v-if="title">
          {{ title }}
        </h3>
      </slot>
      <a v-if="showSetting" class="setting" @click="tableSettingVisible = true">
        <a-icon type="setting" />
        <span class="setting-txt">字段设置</span>
      </a>
    </div>
    <a-table
      v-dragWidth="{ columns, id: tableName }"
      bordered
      :scroll="{ x, y }"
      :columns="columns"
      :data-source="source"
      :pagination="false"
      :row-key="(record, index) => index"
    >
      <span
        v-for="item in columns.filter(_ => _.type)"
        :key="item.key"
        :slot="item.key"
        slot-scope="text, record, index"
      >
        <a-button
          v-if="item.type === 'reset'"
          type="primary"
          @click="operator('清空', index, record)"
        >
          清空
        </a-button>
        <a-textarea
          v-if="item.type === 'textarea'"
          v-model="record[item.key]"
          :max-length="item.maxLength || 100"
          :placeholder="item.title || item.placeholder"
          auto-size
        />
        <a-input-number
          v-if="item.type === 'inputNumber'"
          v-model="record[item.key]"
          style="width: 100%"
          :min="item.min || 0"
          :max="item.max"
          :step="item.step || 1"
          :formatter="item.formatter && (value => `${value}${item.formatter}`)"
          :parser="
            item.formatter && (value => value.replace(`${item.formatter}`, ''))
          "
          :placeholder="item.title || item.placeholder"
          :precision="item.precision || 0"
          @change="val => changeInputNumber(val, item.key, index)"
        />
        <a-input
          v-if="item.type === 'input'"
          v-model="record[item.key]"
          :placeholder="item.title || item.placeholder"
          :disabled="item.setDisabled && item.setDisabled(record)"
          :max-length="item.maxLength || 100"
        />
        <a-date-picker
          v-if="item.type === 'date'"
          v-model="record[item.key]"
          allow-clear
          class="width:100%"
          :placeholder="item.title || item.placeholder"
          value-format="YYYY-MM-DD"
        />
        <a-select
          v-if="item.type === 'select'"
          v-model="record[item.key]"
          allow-clear
          style="width: 100%"
          :placeholder="item.title || item.placeholder"
          :maxTagCount="item.maxTagCount || 2"
        >
          <a-select-option
            v-for="v in record[item.key + 'List'] || item.options"
            :key="v.value"
            :value="v.value"
          >
            {{ v.label }}
          </a-select-option>
        </a-select>
        <template v-if="item.type === 'action'" class="operator-btns">
          <a
            v-for="key in item.btns"
            :key="key"
            @click="operator(key, index, record)"
            >{{ key }}</a
          >
        </template>
      </span>
    </a-table>

    <a-button
      v-if="showAddBtn"
      style="margin-top: 8px"
      block
      size="small"
      type="dashed"
      icon="plus"
      @click="addLine"
    >
      添加
    </a-button>

    <tableSetting
      :visible.sync="tableSettingVisible"
      :local-name="tableName"
      :columns="settingColumns"
      @reload="setColumns"
    />
  </div>
</template>

<script>
import tableSetting from './tableSetting.vue'
import { cloneDeep } from 'lodash'
export default {
  components: { tableSetting },
  props: {
    title: {
      type: String,
      default: ''
    },
    tableName: {
      type: String,
      default: ''
    },
    showSetting: {
      type: Boolean,
      default: false
    },
    source: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    x: {
      type: [String, Number],
      default: '100%'
    },
    y: {
      type: [String, Number],
      default: '100%'
    },
    showAddBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableSettingVisible: false,
      settingColumns: [],
      tableColumns: []
    }
  },
  created() {
    this.settingColumns = cloneDeep(this.columns)

    this.columns.forEach(_ => {
      _.dataIndex = _.key
      _.type && (_.scopedSlots = { customRender: _.key })
      !_.align && (_.align = 'center')
      _.type === 'inputNumber' && (_.align = 'right')
    })

    this.setColumns()
  },
  methods: {
    setColumns() {
      const data = JSON.parse(localStorage.getItem(this.tableName)) || []

      if (data?.length > 0) {
        const columns = []
        data.forEach(_ => {
          this.columns.forEach(item => {
            if (_ === item.title) {
              columns.push(item)
            }
          })
        })
        this.tableColumns = columns
      } else {
        this.tableColumns = this.columns
      }
    },
    changeInputNumber(val, key, index) {
      this.$emit('changeInputNumber', val, key, index, this.tableName)
    },
    addLine() {
      this.$emit('addLine', this.tableName)
    },
    operator(text, index, record) {
      this.$emit('operator', text, index, record, this.tableName)
    }
  }
}
</script>

<style lang="less" scoped>
.columnTable {
  margin-bottom: 20px;
  .header {
    margin-bottom: 5px;
    .setting {
      display: inline-block;
      padding: 5px 0;
      &-txt {
        margin-left: 7px;
      }
    }
  }
}
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 10px;
}
.operator-btns a {
  margin-right: 8px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
